import { Modal } from 'antd';
import { observer } from 'mobx-react';
import { Form, Input, Button } from 'antd';
import { userStore } from '../../stores/UserStore';
import { settingStore } from '../../stores/SettingStore';


interface LoginModalProps {
    visible: boolean;
    cancle: Function;
}

export const EditSingleModal = observer((props: LoginModalProps) => {
    return (
        <Modal title={`编辑${settingStore.editType === 'username' ? '姓名' : '手机'}`} visible={props.visible}
            width={400}
            footer={null}
            centered={true}
            onCancel={() => { props.cancle() }}
        >
            <Form
                name="normal_login"
                className="login-form edit-form"
                initialValues={{ remember: true }}
                onFinish={(v) => settingStore.editSetting(v)}
            >
               {settingStore.editType === 'username' ? <Form.Item
                    name="username"
                    label="姓名"
                    initialValue={userStore.userInfo?.username}
                >
                    <Input />
                </Form.Item>
              : <Form.Item
                    name="phone"
                    label="手机"
                >
                    <Input />
                </Form.Item>}
                <Form.Item>
                    <Button htmlType="submit" className="login-form-button" >
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
})













